<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="public_main">
    <div class="query">
      <el-form inline ref="queryFormRef" :model="queryParams" label-width="120px" size="small">
        <el-form-item label="文件名称：">
          <el-input v-model="queryParams.fileName" clearable></el-input>
        </el-form-item>
        <el-form-item label="上传人：">
          <el-input v-model="queryParams.createUserName" clearable></el-input>
        </el-form-item>
        <el-form-item label="上传时间:">
          <el-date-picker
            v-model="dateRangeCreateTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
          ></el-date-picker>
        </el-form-item>
       
        <el-form-item class="query_btns">
          <el-button size="small" type="primary" icon="search" @click="doQuery">查询</el-button>
          <el-button size="small" type="default" icon="refresh" @click="doReset">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="return_btn">
        <el-tooltip content="返回"><img :src="back" alt="" @click="goBack" /></el-tooltip>
      </div>
    </div>
    <div class="table_div">
      <el-button size="small" type="primary" class="upload_btn" plain icon="Plus" @click="handleVisible('import')">模型上传</el-button>
      <!-- <el-button size="small" type="primary" class="upload_btn" plain icon="Plus" @click="handleVisible('check')">数据质量检测</el-button> -->
      <el-table :data="tableData" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="文件名称" align="center" prop="fileName" fixed="left"> </el-table-column>
        <!-- <el-table-column label="文件大小" align="center" prop="fileSizeWithUnit"> </el-table-column> -->
        <el-table-column label="导入方式" align="center" prop="importMethod"> </el-table-column>
        <el-table-column label="模型/模板名称" align="center" prop="modelName"> </el-table-column>
        <!-- <el-table-column label="模型/模板版本号" align="center" prop="batchNumber"> </el-table-column> -->
        <el-table-column label="上传人" align="center" prop="createUserName"> </el-table-column>
        <el-table-column label="上传时间" align="center" prop="dataImportTime"> </el-table-column>
        <!-- <el-table-column label="数据质量检测状态" align="center" prop="qualityCheck">
          <template #default="scope">
            <span>{{ scope.row.qualityCheck === 0 ? '通过' : '不通过' }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" align="center" width="250">
          <template #default="scope">
            <el-button size="small" link type="primary" icon="View" @click="viewAll(scope.row)">查看数据</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagenation">
        <!-- <el-pagination
          v-show="total > 0"
          layout="total, sizes, prev, pager, next,jumper"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @current-change="handleCurrentChange"
        /> -->
        <pagination
          v-show="total > 0"
          style="margin-top: 0;"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          :background="false"
          layout="prev, pager, next, jumper"
          @pagination="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import back from '@/assets/images/back.svg';
import { getMaterialImportDataList, downloadDataImportFile } from '@/api/dataAcquisition';
import { downloadFile } from '@/utils/index';
const emits = defineEmits(['handleEvent']);
const props = defineProps(['modelId']);
const tableData = ref([]);
const dialogVisible = ref(false);
const fileId = ref(null); 
const ids = ref([]);
const dateRangeCreateTime = ref(['', '']);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  fileName: '',
  createUserName: '',
  startCreateTime: '',
  endCreateTime: '',
  orderByColumn: 'createTime',
  isAsc: 'descending'
});
const modelNumberList = ref([]);
const batchList = ref([]);
const total = ref(0);
const uploadOp2Visible = ref(false);
const currentRow = ref(null);
const resultList = ref([]);
const loading = ref(false);

const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val.page;
  doQuery();
};
const viewAll = (row) => {
  // let origin = window.location.origin;
  // if (origin == 'http://localhost' || origin == 'http://172.16.41.118') {
  //   if (row.dataFileUrl) {
  //     window.open('http://172.16.41.118/file'+row.dataFileUrl, '_blank')
  //   }  
  // } else {
  //   if (row.dataFileUrl) {
  //     window.open(origin + '/isfd/file'+row.dataFileUrl, '_blank')
  //   }
  // }
  const { importMethod, id, modelName, fileName } = row;
  const suffix = fileName.split('.')[1];
  const methodArr = ['Json导入', 'XML导入', 'EXCEL导入', '压缩包导入']
  if (!methodArr.includes(importMethod)) {
    return
  }
  downloadDataImportFile({recordId: id}).then(res => {
    downloadFile(res, `${modelName}`, suffix);
  })
}
const goBack = () => {  
  emits('handleEvent', { component: 'Main'});
}
//查询数据列表
const doQuery = () => {
  loading.value = true;
  tableData.value = [];
  queryParams.value.startCreateTime = dateRangeCreateTime.value[0];
  queryParams.value.endCreateTime = dateRangeCreateTime.value[1];
  let params = {
    modelId: props.modelId,
    ...queryParams.value
  }
  getMaterialImportDataList(params)
    .then((res) => {
      // 处理数据
      loading.value = false;
      total.value = res?.total;
      tableData.value = res.rows;
    })
    .catch(() => {
      loading.value = false;
    }).finally(() => {
      loading.value = false;
    });
};
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id);
};

const doReset = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    fileName: '',
    createUserName: '',
    startCreateTime: '',
    endCreateTime: '',
    orderByColumn: 'createTime',
    isAsc: 'descending'
  };
  dateRangeCreateTime.value = ['', ''];
  doQuery();
};
// 打开弹窗方法
const handleVisible = (param, data) => {
  if (param == 'import') {
    emits('handleEvent', { component: 'ImportMaterial', modelId: props.modelId });
  }
};

onMounted(() => {
  doQuery();
});
</script>
<style lang="scss" scoped>
.public_main {
  .query {
    position: relative;
    border: 1px solid #dddddd7a;
    padding: 20px 10px 0 10px;
    .query_btns {
      padding-left: 100px;
    }
    .return_btn {
      position: absolute;
      top: 30px;
      right: 30px;
      // width: 100%;
      > img {
        height: 45px;
        width: 45px;
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
  .table_div {
    margin-top: 10px;
    border: 1px solid #dddddd7a;
    padding-bottom: 10px;
    .upload_btn {
      margin: 10px 10px;
    }
    .pagenation {
      display: flex;
      justify-content: end;
      margin-top: 10px;
    }
  }
  :deep(.el-form-item__content) {
    width: 220px;
  }
  :deep(.el-tree-node__label) {
    font-size: 12px;
    color: #606266;
  }
}
</style>
      